<template>
	<view class="index">
		<view class="info-wrapper">
			<view class="title-wrapper">
				<view>当前吨位：<text class="bold">{{ totalTonnage }}吨</text></view>
				<view>预设吨位：<text class="bold">{{ params.estimatedTonnage }}吨</text></view>
			</view>
			<view class="item-wrapper">
				<view class="item" v-for="(item,index) in pickupPointList" :key="index">
					<text>{{ index + 1 }}、</text>
					<text>{{ params.cityName }}.</text>
					<text>{{ item.pickupPointName }}：</text>
					<text>{{ item.actualTonnage || 0 }}吨</text>
				</view>
			</view>
		</view>
		<view class="nodata-wrapper" v-if="!list.length">
			<image src="../static/image/nodata.png" class="data-image" mode="widthFix"></image>
			<view class="text">
				暂无车辆安排~
			</view>
		</view>
		<view v-else class="list-wrapper">
			<view class="list-item" v-for="(item,index) in list" :key="index">
				<view class="title-wrapper">
					<view class="title">
						{{ index + 1 }}号车：{{ item.parkingSpace }}
					</view>
					<view class="status">
						{{ statusList[item.status] }}
					</view>
				</view>
				<view class="car-info-wrapper">
					<view class="car-base-info">
						<text class="car-number">{{ item.licensePlateNo }}</text>
						<text class="info" v-if="item.vehicleModel">{{ item.vehicleModel }}</text>
					</view>
					<view class="person-info">
						<text>载货阶段：{{ item.schemaCaption }}</text>
					</view>
					<view class="person-info">
						<text>司机：{{ item.driverName }}</text>
						<text v-if="item.driverTel">({{item.driverTel}})</text>
					</view>
					<view class="person-info">
						<text>装车：{{ item.loaderName }}</text>
						<text v-if="item.loaderTel">({{item.loaderTel}})</text>
					</view>
				</view>
				<view class="list-btn-wrapper">
					<view class="btn default"
						v-if="item.status === 0 && $permissions.verify('app:transpot:dispatch:add')"
						@click="remove(item)">
						删除安排
					</view>
					<view class="btn default" v-if="item.status < 2 && $permissions.verify('app:transpot:dispatch:add')"
						@click="goEdit(item)">
						修改安排
					</view>
					<view class="btn default" v-if="item.status > 1" @click="goDetail(item)">
						运输单
					</view>
					<view class="btn default" v-if="item.status > 1" @click="print(item)">
						打印随车单
					</view>
					<view class="btn primary"
						v-if="item.status === 0 && $permissions.verify('app:transpot:dispatch:in-place')"
						@click="vehicleInPlace(item)">
						车辆到位
					</view>
					<view class="btn primary"
						v-if="item.status === 1 && $permissions.verify('app:transpot:dispatch:depart')"
						@click="depart(item)">
						发车
					</view>
				</view>
			</view>
		</view>

		<view v-if="canAdd" class="add-btn-wrapper" @click="add">
			新增车辆安排
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				params: '',
				list: [],
				pickupPointList: [],
				statusList: ['车未到位', '装车中', '运输中', '已到站']
			}
		},
		onLoad(option) {
			if (option.params) {
				this.params = JSON.parse(option.params)
				this.getPickupPointTonnage(this.params.cityId)
			}
			//this.getData()
		},
		onShow() {
			if (this.params.id) {
				this.getData()
			}
		},
		computed: {
			totalTonnage() {
				let number = 0;
				this.pickupPointList.forEach(item => {
					number += parseFloat(item.actualTonnage || 0)
				})
				return number;
			},
			canAdd() {
				const today = this.$helper.getDay(0, '-')
				const dispatchDate = this.params.dispatchDate;
				const time1 = new Date(today).getTime()
				const time2 = new Date(dispatchDate).getTime()
				return time1 <= time2 && this.$permissions.verify('app:transpot:dispatch:add');
			},
		},
		methods: {
			async getData() {
				const data = await this.$api.post('/adm/transport/listNoPage', {
					dispatchId: this.params.id
				})
				if (data.code === 200) {
					this.list = data.data;
				}
			},
			async getPickupPointTonnage(id) {
				const data = await this.$api.post('/adm/transport/getPickupPointTonnage', {
					cityId: id,
					supplyDate: this.params.dispatchDate,
					supplyWarehouseId: this.params.supplyWarehouseId
				}, false)
				if (data.code === 200) {
					console.log("this.pickupPointList", this.pickupPointList)
					this.pickupPointList = data.data;
				}
			},
			remove(row) {
				this.$showModal({
					title: '删除确认',
					content: '是否要删除该安排？',
					confirmText: '删除',
					cancelText: '手滑了',
					success: async (res) => {
						if (res.confirm) {
							await this.$api.del('/adm/transport/remove', [row.id])
							this.getData()
							uni.showToast({
								title: '已删除'
							})
						}
					}
				})
			},
			vehicleInPlace(row) {
				this.$showModal({
					title: '车辆到位',
					content: '车辆是否已经到位？',
					confirmText: '已到位',
					cancelText: '未到位',
					success: async (res) => {
						if (res.confirm) {
							await this.$api.post('/adm/transport/vehicleInPlace', {
								id: row.id
							})
							this.getData()
							uni.showToast({
								title: '操作成功'
							})
						}
					}
				})
			},
			depart(row) {
				uni.navigateTo({
					url: '/subPage_distribution/depart?id=' + row.id + '&params=' + JSON.stringify(this
						.params)
				})
			},
			add() {
				uni.navigateTo({
					url: '/subPage_distribution/vehiclesPlan?params=' + JSON.stringify(this.params)
				})
			},
			goEdit(row) {
				uni.navigateTo({
					url: '/subPage_distribution/vehiclesPlanEdit?id=' + row.id + '&params=' + JSON.stringify(this
						.params)
				})
			},
			goDetail(row) {
				uni.navigateTo({
					url: '/subPage_distribution/vehiclesPlanDetail?id=' + row.id + '&params=' + JSON.stringify(this
						.params)
				})
			},
			print(row) {

			}
		},
		components: {

		}
	}
</script>

<style lang="scss" scoped>
	.index {
		height: 100%;
		overflow: auto;
		padding-bottom: 150upx;

		.info-wrapper {
			background-color: #555BFFbb;
			padding: 0upx 30upx 30upx 30upx;
			color: #ffffff;
			border-radius: 0 0 20upx 20upx;

			.title-wrapper {
				height: 90upx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 32upx;

				.bold {
					font-weight: bold;
					font-size: 36upx;
				}
			}

			.item-wrapper {
				padding: 0 20upx;

				.item {
					margin-bottom: 10upx;
				}
			}
		}

		.nodata-wrapper {
			text-align: center;
			font-size: 32upx;
			color: #666666;

			.data-image {
				margin-top: 200upx;
				margin-bottom: 10upx;
				width: 296upx;
				height: 205upx;
			}
		}

		.list-wrapper {
			padding: 0 20upx;

			.list-item {
				margin-top: 20upx;
				background-color: #ffffff;
				overflow: hidden;
				border-radius: 20upx;

				.title-wrapper {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-bottom: 10upx;
					height: 80upx;
					background-color: #F5F6FA;
					padding: 0 20upx;
					font-size: 32upx;

					.title {
						font-weight: bold;
						color: #313131;
					}

					.status {
						color: #FF8D1A;
					}
				}

				.car-info-wrapper {
					color: #575757;
					padding: 10upx 24upx;

					.car-base-info {
						display: flex;
						font-size: 28upx;
						align-items: center;

						.car-number {
							font-weight: bold;
							font-size: 34upx;
							margin-right: 20upx;
							color: #212121;
						}
					}

					.person-info {
						margin-top: 10upx;
					}
				}

				.list-btn-wrapper {
					display: flex;
					align-items: center;
					justify-content: flex-end;
					margin-top: 10upx;
					height: 100upx;
					border-top: 1upx dashed #dcdcdc;

					.btn {
						padding: 13upx 30upx;
						background-color: #ffffff;
						border: 1upx solid #bbbbbb;
						border-radius: 10upx;
						font-size: 28upx;
						margin-right: 20upx;

						&.primary {
							color: #ffffff;
							background-color: #555BFF;
							border-color: #555BFF;
						}
					}
				}
			}
		}

		.add-btn-wrapper {
			height: 100upx;
			width: 100%;
			position: fixed;
			left: 0;
			bottom: 0;
			background-color: #555BFF;
			color: #ffffff;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 32upx;
			transition: .1s linear;

			&:active {
				background-color: #555BFFaa;
			}
		}
	}
</style>